<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="e1">
  <img src="bla.png" class="a1">
  <div  class="y1">My Cart</div>
  <img src="横线.png" class="y2">

  <img src="h3.png" class="y3">
  <div class="y4">Bell Pepper Red</div>
  <div class="y5">1kg, Price</div>
  <img src="cha.png" class="y6">
  <img src="jie.png" class="y7">
  <img src="kuang.png" class="y8">



  <button onclick="increaseCount()" class="m1">
    <img src="h4.png" class="y9">
  </button>




 <div class="h2">
    <span id="countDisplay">0</span></div>




  <div class="h3">$4.99</div>
  <img src="h5.png" class="h4">




  <img src="jidanll.png" class="t1">
  <div class="t2">Egg Chicken Red</div>
  <div class="t3">4pcs, Price</div>
  <img src="cha.png" class="t4">
  <img src="jie.png" class="t5">
  <img src="kuang.png" class="t6">
  <img src="h4.png" class="t7">
  <img src="baik.png" class="t8">
  <div class="t9">1</div>
  <div class="t10">$1.99</div>
  <img src="h5.png" class="t11">


  <img src="h2.png" class="p1">
  <div class="p2">Organic Bananas</div>
  <div class="p3">12kg, Price</div>
  <img src="cha.png" class="p4">
  <img src="jie.png" class="p5">
  <img src="kuang.png" class="p6">
  <img src="h4.png" class="p7">
  <img src="baik.png" class="p8">
  <div class="p9">1</div>
  <div class="p10">$3.00</div>
  <img src="h5.png" class="p11">

  <img src="h1.png" class="l1">
  <div class="l2">Ginger</div>
  <div class="l3">250gm, Price</div>
  <img src="cha.png" class="l4">
  <img src="jie.png" class="l5">
  <img src="kuang.png" class="l6">
  <img src="h4.png" class="l7">
  <img src="baik.png" class="l8">
  <div class="l9">1</div>
  <div class="l10">$2.99</div>
  <img src="h5.png" class="l11">

  <img src="hhh.png" class="f1">

    <a href="http://localhost:63342/untitled5/%E4%BB%98%E6%AC%BE%E5%8F%B0.html?_ijt=b1oaqic50pkc2hss81g8fq7un4&_ij_reload=RELOAD_ON_SAVE">

    <div class="f2">
        Go to Checkout </div></a>




  <p class="pos_fixed">
    <img src="购物车页面.png" style="left: 20px;
top:10px;position:relative;">
    <a href="http://localhost:63342/untitled5/%E5%88%86%E7%B1%BB.html?_ijt=jp5tqce2i9t96a733qtjle4hk9&_ij_reload=RELOAD_ON_SAVE">
      <img src="搜索标签.png" style="left: 60px;
top:10px;position:relative;">
    </a>
    <img src="购物车页面.png" style="left: 100px;
top:13px;position:relative;">

    <img src="收藏页面.png" style="left: 140px;
top:14px;position:relative;">

    <img src="个人主页.png" style="left: 180px;
top:14px;position:relative;">



  </p>
  <span id="totalPriceDisplay" class="f3">0</span>


</div>

</body>
<script>
  let count = 0;
  let pricePerItem = 4.99;

  function increaseCount() {
    count++;
    document.getElementById("countDisplay").innerHTML = count;
    calculatePrice();
  }

  function calculatePrice() {
    let totalPrice = count * pricePerItem;
    document.getElementById("totalPriceDisplay").innerHTML = totalPrice;
  }
</script>

<style>

  .m1{
    left: 215px;
    top: 185px;
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius: 20px 20px 20px 20px;
    border: 1px solid rgba(226, 226, 226, 1);
      background-color: #fdfdfe;
  }
  .f3{
    left: 321.66px;
    top: 734.88px;
    width: 43px;
    height: 22px;
    opacity: 1;
    border-radius: 4px;
    background: rgba(72, 158, 103, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 2px 5px 2px 5px;
position: absolute;
  }
  .f2{
    left: 139.83px;
    top: 738.88px;
    width: 134.13px;
    height: 14px;
    opacity: 1;
    /** 文本1 */
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 18px;
    color: rgba(252, 252, 252, 1);
    text-align: left;
    vertical-align: top;
position: absolute;
  }
  .f1{
    left: 24.89px;
    top: 712.38px;
    width: 364px;
    height: 67px;
    opacity: 1;
    border-radius: 19px;
    background: rgba(83, 177, 117, 1);
position: absolute;
  }
  p.pos_fixed
  {
    position:fixed;
    top:600px;
    left: 7px;
    width: 408px;
    height: 80px;
    background-color: white;
    border: 1px solid antiquewhite;
  }
  .p1{
    left: 30px;
    top: 470.98px;
    width: 68.62px;
    height: 54.56px;
    opacity: 1;
    background: url(https://img.js.design/assets/img/622ad42d0b96c7752c67f5ce.png#dacaab9321cabdfea1373cbe97f9262f);
position: absolute;
  }
  .p2{
    left: 128.41px;
    top: 449.98px;
    width: 137.02px;
    height: 18px;
    opacity: 1;

    border: 0px solid rgba(255, 255, 255, 1);

    /** 文本1 */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.1px;
    line-height: 18px;
    color: rgba(24, 23, 37, 1);
    text-align: left;
    vertical-align: middle;
position: absolute;
  }
  .p3{
    left: 128.41px;
    top: 472.98px;
    width: 72.27px;
    height: 14.89px;
    opacity: 1;

    border: 0px solid rgba(255, 255, 255, 1);

    /** 文本1 */
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 18px;
    color: rgba(124, 124, 124, 1);
    text-align: left;
    vertical-align: middle;
position: absolute;
  }
  .p4{
    left: 382.81px;
    top: 463.98px;
    width: 8.4px;
    height: 10px;

position: absolute;
  }
  .p5{
    left: 142.74px;
    top: 522.7px;
    width: 17px;
    height: 2.84px;
    opacity: 1;
    background: rgba(179, 179, 179, 1);
position: absolute;
  }
  .p6{
    left: 128.41px;
    top: 501.29px;
    width: 45.67px;
    height: 45.67px;
    opacity: 1;
    border-radius: 17px;

    border: 1px solid rgba(240, 240, 240, 1);

position: absolute;
  }
  .p7{
    left: 230.31px;
    top: 514.2px;
    width: 17px;
    height: 17px;
    opacity: 1;
    background: rgb(253, 253, 254);
position: absolute;
  }
  .p8{
    left: 215.97px;
    top: 499.87px;
    width: 45.67px;
    height: 45.67px;
    opacity: 1;
    border-radius: 17px;

    border: 1px solid rgba(226, 226, 226, 1);

position: absolute;
  }
  .p9{
    left: 191.53px;
    top: 519.2px;
    width: 10px;
    height: 18px;
    opacity: 1;

    border: 0px solid rgba(255, 255, 255, 1);

    /** 文本1 */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.1px;
    line-height: 18px;
    color: rgba(24, 23, 37, 1);
    text-align: left;
    vertical-align: middle;
position: absolute;
  }
  .p10{
    left: 339.62px;
    top: 500.91px;
    width: 49.38px;
    height: 27px;
    opacity: 1;

    border: 0px solid rgba(255, 255, 255, 1);

    /** 文本1 */
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.1px;
    line-height: 27px;
    color: rgba(24, 23, 37, 1);
    text-align: left;
    vertical-align: middle;
position: absolute;
  }
  .p11{
    left: 25.2px;
    top: 576.45px;
    width: 363.6px;
    height: 0px;
    opacity: 1;

    border: 1px solid rgba(226, 226, 226, 1);

position: absolute;
  }


  .l1{
    left: 23.85px;
    top: 620.74px;
    width: 72.39px;
    height: 65.04px;
    opacity: 1;
    background: url(https://img.js.design/assets/img/622ad452f89eeaf9720538cc.png#7c8d3401c34ca7697ebda3c8fc9f4211);
position: absolute;
  }
  .l2{
    left: 128.41px;
    top: 606.95px;
    width: 137.02px;
    height: 18px;
    opacity: 1;

    border: 0px solid rgba(255, 255, 255, 1);

    /** 文本1 */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.1px;
    line-height: 18px;
    color: rgba(24, 23, 37, 1);
    text-align: left;
    vertical-align: middle;
position: absolute;
  }
  .l3{
    left: 128.41px;
    top: 629.95px;
    width: 83px;
    height: 18px;
    opacity: 1;

    border: 0px solid rgba(255, 255, 255, 1);

    /** 文本1 */
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 18px;
    color: rgba(124, 124, 124, 1);
    text-align: left;
    vertical-align: middle;
position: absolute;
  }
  .l4{
    left: 382.81px;
    top: 620.95px;
    width: 8.4px;
    height: 10px;

position: absolute;
  }
  .l5{
position: absolute;
    left: 142.74px;
    top: 679.68px;
    width: 17px;
    height: 2.84px;
    opacity: 1;
    background: rgba(179, 179, 179, 1);

  }
  .l6{
    left: 128.41px;
    top: 658.26px;
    width: 45.67px;
    height: 45.67px;
    opacity: 1;
    border-radius: 17px;

    border: 1px solid rgba(240, 240, 240, 1);


    position: absolute;
  }
  .l7{
    left: 230.31px;
    top: 671.18px;
    width: 17px;
    height: 17px;
    opacity: 1;
    background: rgb(253, 253, 254);



    position: absolute;
  }
  .l8{
    left: 215.97px;
    top: 656.85px;
    width: 45.67px;
    height: 45.67px;
    opacity: 1;
    border-radius: 17px;

    border: 1px solid rgba(226, 226, 226, 1);


    position: absolute;
  }
  .l9{
    left: 191.53px;
    top: 676.18px;
    width: 10px;
    height: 18px;
    opacity: 1;

    border: 0px solid rgba(255, 255, 255, 1);

    /** 文本1 */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.1px;
    line-height: 18px;
    color: rgba(24, 23, 37, 1);
    text-align: left;
    vertical-align: middle;

    position: absolute;
  }
  .l10{
    left: 345px;
    top: 658.39px;
    width: 44px;
    height: 54px;
    opacity: 1;

    border: 0px solid rgba(255, 255, 255, 1);

    /** 文本1 */
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.1px;
    line-height: 27px;
    color: rgba(24, 23, 37, 1);
    text-align: left;
    vertical-align: middle;

    position: absolute;
  }
  .l11{
    left: 0px;
    top: 732.02px;
    width: 413.6px;
    height: 0px;
    opacity: 1;

    border: 1px solid rgba(226, 226, 226, 1);


    position: absolute;
  }


  .t1{
    left: 13.83px;
    top: 297.63px;
    width: 86.74px;
    height: 86.74px;
    opacity: 1;
    background: url(https://img.js.design/assets/img/622ad484cde90a439156c28c.png#8dd00e217746f6798897e2226ccc814c);
position: absolute;
  }
  .t2{
    left: 128.41px;
    top: 293px;
    width: 137.02px;
    height: 18px;
    opacity: 1;

    border: 0px solid rgba(255, 255, 255, 1);

    /** 文本1 */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.1px;
    line-height: 18px;
    color: rgba(24, 23, 37, 1);
    text-align: left;
    vertical-align: middle;
position: absolute;

  }
  .t3{
    left: 128.41px;
    top: 316px;
    width: 72.27px;
    height: 14.89px;
    opacity: 1;

    border: 0px solid rgba(255, 255, 255, 1);

    /** 文本1 */
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 18px;
    color: rgba(124, 124, 124, 1);
    text-align: left;
    vertical-align: middle;
position: absolute;
  }
  .t4{
    left: 382.81px;
    top: 307px;
    width: 8.4px;
    height: 10px;
    position: absolute;
  }
  .t5{
    left: 142.74px;
    top: 365.73px;
    width: 17px;
    height: 2.84px;
    opacity: 1;
    background: rgba(179, 179, 179, 1);
position: absolute;
  }
  .t6{
    left: 128.41px;
    top: 344.31px;
    width: 45.67px;
    height: 45.67px;
    opacity: 1;
    border-radius: 17px;

    border: 1px solid rgba(240, 240, 240, 1);

position: absolute;
  }
  .t7{
    left: 230.31px;
    top: 357.23px;
    width: 17px;
    height: 17px;
    opacity: 1;
    background: rgb(253, 253, 254);
position: absolute;
  }
  .t8{
    left: 215.97px;
    top: 342.89px;
    width: 45.67px;
    height: 45.67px;
    opacity: 1;
    border-radius: 17px;

    border: 1px solid rgba(226, 226, 226, 1);

position: absolute;
  }
  .t9{
    left: 191.53px;
    top: 362.23px;
    width: 10px;
    height: 18px;
    opacity: 1;

    border: 0px solid rgba(255, 255, 255, 1);

    /** 文本1 */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.1px;
    line-height: 18px;
    color: rgba(24, 23, 37, 1);
    text-align: left;
    vertical-align: middle;
position: absolute;
  }
  .t10{
    left: 345px;
    top: 344.43px;
    width: 44px;
    height: 54px;
    opacity: 1;

    border: 0px solid rgba(255, 255, 255, 1);

    /** 文本1 */
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.1px;
    line-height: 27px;
    color: rgba(24, 23, 37, 1);
    text-align: left;
    vertical-align: middle;
position: absolute;
  }
  .t11{
    left: 25.2px;
    top: 419.48px;
    width: 363.6px;
    height: 0px;
    opacity: 1;

    border: 1px solid rgba(226, 226, 226, 1);

position: absolute;
  }
  .h4{
    left: 25.2px;
    top: 262.5px;
    width: 363.6px;
    height: 0px;
    opacity: 1;

    border: 1px solid rgba(226, 226, 226, 1);

position: absolute;
  }
  .h3{
    left: 345px;
    top: 187.43px;
    width: 44px;
    height: 54px;
    opacity: 1;

    border: 0px solid rgba(255, 255, 255, 1);

    /** 文本1 */
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.1px;
    line-height: 27px;
    color: rgba(24, 23, 37, 1);
    text-align: left;
    vertical-align: middle;
position: absolute;
  }
  .h2{
    left: 191.53px;
    top: 205.22px;
    width: 10px;
    height: 18px;
    opacity: 1;



    /** 文本1 */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.1px;
    line-height: 18px;

    text-align: left;
    vertical-align: middle;
position: absolute;
  }
  .h1{
    left: 215.97px;
    top: 185.89px;
    width: 45.67px;
    height: 45.67px;
    opacity: 1;
    border-radius: 17px;

    border: 1px solid rgba(226, 226, 226, 1);

position: absolute;
  }
  .y9{
    left: 13px;
    top: 15px;
    width: 17px;
    height: 17px;
    opacity: 1;
    background: rgb(253, 253, 254);
position: absolute;
  }
  .y8{
    left: 128.41px;
    top: 187.3px;
    width: 45.67px;
    height: 45.67px;
    opacity: 1;
    border-radius: 17px;

    border: 1px solid rgba(240, 240, 240, 1);

position: absolute;
  }
  .y7{
    left: 142.74px;
    top: 208.72px;
    width: 17px;
    height: 2.84px;
    opacity: 1;
    background: rgba(179, 179, 179, 1);
position: absolute;
  }
  .y6{
    left: 382.81px;
    top: 150px;
    width: 8.4px;
    height: 10px;
    transform: rotate(-180deg);
    position: absolute;
  }
  .y5{
    left: 128.41px;
    top: 158.99px;
    width: 72.27px;
    height: 14.89px;
    opacity: 1;

    border: 0px solid rgba(255, 255, 255, 1);

    /** 文本1 */
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 18px;
    color: rgba(124, 124, 124, 1);
    text-align: left;
    vertical-align: middle;
position: absolute;
  }
  .y4{
    left: 128.41px;
    top: 135.99px;
    width: 137.02px;
    height: 18px;
    opacity: 1;

    border: 0px solid rgba(255, 255, 255, 1);

    /** 文本1 */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.1px;
    line-height: 18px;
    color: rgba(24, 23, 37, 1);
    text-align: left;
    vertical-align: middle;
position: absolute;
  }
  .y3{
    left: 25px;
    top: 152.14px;
    width: 70.43px;
    height: 64.69px;
    background: url(https://img.js.design/assets/img/622ad45165f618b5716cee46.png#df80f484040ddb66a81f73b4e26fea84);
position: absolute;
  }
  .y2{
    left: 5px;
    top: 105.49px;
    width: 410px;
    height: 0px;
    opacity: 1;

    border: 1px solid rgba(226, 226, 226, 1);

position: absolute;
  }
.y1{
  left: 170px;
  top: 55.82px;
  width: 74px;
  height: 18px;
  opacity: 1;
  /** 文本1 */
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 18px;
  color: rgba(24, 23, 37, 1);
  text-align: center;
  vertical-align: middle;
position: absolute;
}
  .e1{
    left: -1366px;
    top: -813px;
    width: 405px;
    height: 870px;
    opacity: 1;
    background: rgba(255, 255, 255, 1);
    border: 1px solid antiquewhite;

  }
  .a1{
    left: -0.4px;
    top: 4.83px;
    width: 414px;
    height: 80px;
    opacity: 1;
  }
</style>
</html>